<template>
  <input ref="fileRef" type="file" @change="fileChange">
  <button @click="upload">上传</button>
  <el-progress :percentage="nums" />
</template>

<script setup lang="ts">

import { ref } from 'vue'
import { createChunk, createMd5, getExtension } from './utils'
import { verifyFile, fileUpload, fileMerge } from './request'
import { ElMessage } from 'element-plus'
const nums = ref(0)
const files = ref<File | null>(null)
const fileRef = ref<HTMLInputElement | null>(null)
const completedCount = ref(0)
const fileChange = () => {
  nums.value = 0
  if (fileRef.value?.files && fileRef.value?.files?.length > 0) files.value = fileRef.value?.files[0]
}

const upload = async () => {
  if (!files.value) {
    return console.log('请选择要上传的文件')
  }
  // 创建切片列表
  const chunkList = createChunk(files.value)
  console.log(chunkList, 'chunkList')
  // // 生成文件md5值
  const md5 = await createMd5(chunkList)
  console.log(md5)
  // // 验证文件状态接口
  const { uploadedList, url } = await verifyFile(md5, getExtension(files.value.name))
  if (url) {
    console.log('文件上传成功')
    ElMessage({
      message: '文件上传成功', type: 'success'
    })
    return
  }
  // 获取需要上传的切片
  const needUploadList: {
    file: Blob,
    filename: string
  }[] = []
  chunkList.forEach((file: Blob, index: number) => {
    console.log(file)
    const filename = `${md5}-${index}`
    if (uploadedList.indexOf(filename) === -1) {
      needUploadList.push({
        filename,
        file
      })
    }
  })
  console.log(needUploadList.length, 'needUploadList.length')
  // // 上传切片
  //  nums.value = (i + 1) / needUploadList.length * 100
  Promise.all(needUploadList.map((item, i) => { 
    // console.log('需要上传的切片', item)
    const data = new FormData()
    data.append('file', item.file)
    data.append('filename', item.filename)
    data.append('fileMd5', md5)
    return fileUpload(data).then(() => {
      // 计算并更新进度条的值
      completedCount.value++
      nums.value = (completedCount.value / needUploadList.length) * 100
      nums.value = Math.floor(nums.value)
    })
  })).then(async (res) => {
    // console.log(res)
    // 全部上传成功，合并切片
    console.log(nums.value, 'nums.value')
    const { code } = await fileMerge(md5, getExtension(files.value?.name as string))
    if (code === 200) {
      console.log('文件上传成功')
      ElMessage({
        message: '文件上传成功', type: 'success'
      })
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>
